<template>
  <div>
    <top-nav></top-nav>
    <div class="app-main">
      <div class="body">
        <div class="user-bio-section-header"><span>我的订单</span></div>
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="order_num" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="shop_name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="price" width="95" label="应付金额">
          </el-table-column>
          <el-table-column prop="status" width="95" label="状态">
            <template slot-scope="scope">
              <div class="">
                {{scope.row.status==1?'待付款':scope.row.status==2?'已付款':'已取消'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="order_time" width="180" label="时间">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button v-show="scope.row.status==1" size="mini" type="primary" @click="pay(scope.row.order_num)">支付</el-button>
              <el-button v-show="scope.row.status==1" size="mini" type="info" @click="orderCancel(scope.row.order_num)">取消</el-button>
              <el-button v-show="scope.row.status==2" size="mini" type="primary" @click="exam(scope.row.shop_id)">答题</el-button>
              <!-- <el-button v-show="scope.row.status==2" size="mini" type="warning" @click="goGame()">玩游戏</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>

export default {
	name: "order-list",

	data: () => ({
		dialogTableVisible:false,
		list: [],
	}),
	mounted(){
	},
	methods: {
    // 
    exam(e){
      this.$router.push({ name: 'exam-testing', params: { id:e }})
    },
    goGame(){
      this.$router.push('/game/balloon')
    },
		// 支付
		pay(data){
			this.$router.push({
				path:'/order/detail',
				query:{order_num:data}
			})
		},
		// 获取订单列表
		async getList() {
			let {data: { code, data }} = await this.$http.post(this.$api.orderList, {});
			if (code == 200) {
				this.list = data;
			}
		},
		// 取消订单
		async orderCancel(e){
			this.$confirm('确定取消该订单?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
        	}).then(() => {
				this._orderCancel(e)
			}).catch(() => {

			});

		},
		async _orderCancel(e){
			let params={
                order_id:e
            }
            let {data:{code,data}} = await this.$http.post(this.$api.orderCancel,params)
            if(code==200){
				this.$message({
					type: 'success',
					message: '取消成功成功!'
				});
				this.getList()
            }
		}
	},
	created() {
		this.getList();
	},
};
</script>

<style lang="scss" scoped>
.app-main {
  min-height: calc(100vh - 50px);
  position: relative;
  overflow: hidden;
  .body {
    width: 80%;
    margin: 20px auto 30px;
    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding: 10px;
      margin-bottom: 10px;
      font-weight: 700;
    }
  }
}

</style>
